class Cart{
    constructor(){
        this.tbody = document.querySelector('tbody')
        this.cartTable = document.querySelector('.cartTable')
        this.selectAll = document.querySelector('.selectAll')
        this.totalNum = document.querySelector('.totalNum')
        this.totalmoney = document.querySelector('.money')
        //从localStorage中获取数据
        this.list = JSON.parse(localStorage.getItem('cart')) || []
        this.init()
    }
    init(){
        this.render()
        this.bindHtml()
    }
    render(){
        //若localStorage内没有数据，给一个提示，让他返回到购物界面
        if(!this.list.length){
            this.tbody.innerHTML =`
            <tr>
                 <td colspan="6" heigth="100">
                     <h1>你的购物车居然是空的! <a href="../index.html">去逛逛</a></h1>
                 </td>
            </tr>
            `    
         }else{
             //先清空，再渲染
             this.tbody.innerHTML =''
             //有数据则进入
             this.list.forEach(item=>{
                 this.tbody.innerHTML +=`
                 <tr>
                         <td><input type="checkbox" value="" class="select" data-id="${item.goods_id}" ${item.is_select && 'checked'}/></td>
                         <td>
                             <img src="${item.img_small_logo}" >
                             <span class="hide">${item.title}</span>
                         </td>
                         <td><span>${item.price}</span></td>
                         <td>
                             <span class="sub" data-id="${item.goods_id}">-</span>
                             <input type="text" value="${item.cart_number}" class="txt" data-id="${item.goods_id}"/>
                             <span class="add" data-id="${item.goods_id}">+</span>
                         </td>
                         <td><span class="price">${item.cart_number * item.price}元</span></td>
                         <td><span class="del" data-id="${item.goods_id}">删除</span></td>
                     </tr>
                 `
             })
         }
         //数据可持续化功能
         localStorage.setItem('cart',JSON.stringify(this.list))
         //调用实现商品总数量和总价的功能
         this.total()
    }
    //购物车各种功能，先做事件委派
    bindHtml(){
        this.cartTable.addEventListener('click',(e)=>{
            let target = e.target

            //全选按钮
            if(target.className == 'selectAll'){
                //获取复选框状态
                let type = target.checked
                //遍历数据
                this.list.forEach(item=>{
                    item.is_select = type
                })
                //重新渲染数据
                this.render()
            }

            //单选按钮
            if(target.className == 'select'){
                let id = target.dataset.id - 0
                let goods = this.list.find(item=>{return item.goods_id == id})
                //修个goods的is_select属性
                goods.is_select = !goods.is_select
                //渲染数据
                this.render()
            }

            //商品数量增加
            if(target.className == 'add'){
                let id = target.dataset.id - 0
                let goods = this.list.find(item=>{return item.goods_id == id})
                //限定购买数量 goods_number为库存
                // if(goods.cart_number == goods.goods_number)
                if(goods.cart_number == 9){
                    alert('亲，只能购买9件哦')
                    return
                }
                goods.cart_number++
                this.render()
            }

            //商品数量减少
            if(target.className == 'sub'){
                let id =target.dataset.id - 0
                let goods = this.list.find(item=>{return item.goods_id == id})
                //限定最少购买数量为1件
                if(goods.cart_number == 1){
                    return
                }
                goods.cart_number--
                this.render()
            }

            //点击删除功能
            if(target.className == 'del'){
                let id = target.dataset.id -0
                let index = this.list.findIndex(item=>{return item.goods_id == id})
                this.list.splice(index,1) //splice删除，从下标为1开始删除
                this.render()

                //判断数组是否为空
                if(!this.list.length){
                    this.selectAll.checked = false
                }
            }

            //点击删除功能，删除被选中的按钮
            if(target.className == 'dlAll'){
                //如果item.is_select == false最终筛选出来的是没有选中的
                let data = this.list.filter(item=>{return item.is_select == false})
                //给咱们要操作的数组重新赋值即可
                this.list = data
                this.render()

                //判断数组是否为空
                if(!this.list.length){
                    this.selectAll.checked = false
                }
            }
        },false)
    }
    //实现商品的总数量和总价的功能
    total(){
        //重新获取数据
        this.list = JSON.parse(localStorage.getItem('cart')) || []
        //声明一个数量和总价的变量
        let count = 0
        let money = 0
        //遍历数据 注意：forEach不会对空数组遍历
        this.list.forEach(item=>{
            //判断是否选中（单选框），进行数量和价格的计算
            if(item.is_select == true){
                count += item.cart_number
                money += item.cart_number*item.price
            }

            //使用every查看数组里面is_select的状态  每一次刷新total都会被调用，所以这个会执行
            let res = this.list.every(item=>{return item.is_select == true})
            if(res){
                this.selectAll.checked = true
            }else{
                this.selectAll.checked = false
            }

        })
        //进行赋值操作
        this.totalNum.innerHTML = count
        this.totalmoney.innerHTML = money
    }
}
new Cart()